import React, { Component } from 'react';
import TheButton from "../../../components/TheButton";
import TheTable from "../../../components/TheTable";
import ThePagination from "../../../components/ThePagination";
import {
  apiGetStoreServiceLabelPage,
  apiGetStoreServiceLabelAdd,
  apiGetStoreServiceLabelEdit,
  apiGetStoreServiceLabelDel
} from '@/request/serviceConfig'
import Editor from "../component/Edit";
import TheDialog from "../../../components/TheDialog";
import '../style/index.less'

class Label extends Component {
  state = {
    loading: false,
    dataSource: null,
    columns: [
      {
        title: '门店标签',
        dataIndex: 'storeServiceName',
        key: 'storeServiceName',
        align: 'center'
      },
      {
        title: '操作',
        align: 'center',
        render: (text, record) => {
          return <>
            <TheButton haspermi={['store:update']}
              onClick={() => this.openDialog('update', record)}>修改</TheButton>
            <TheButton haspermi={['store:delete']} onClick={() => this.del(record)}>删除</TheButton>
          </>
        }
      }
    ],
    pageParams: {
      pageNo: 1,
      pageSize: 10
    },
    total: 1,
    title: '',
    dialogStatus: false,
    editorList: null,
    editorType: ''
  }

  async componentDidMount() {
    this.getData()
  }

  getData = async () => {
    const { pageParams: { pageNo, pageSize } } = this.state
    this.setState({
      loading: true
    })
    const response = await apiGetStoreServiceLabelPage({ pageNo, pageSize })
    if (response.code === 0) {
      this.setState({
        dataSource: response.data,
        loading: false,
        pageParams: {
          pageNo: response.pageNo,
          pageSize: response.pageSize
        },
        total: response.totalCount
      })
    } else {
      this.setState({
        loading: false
      })
    }
  }
  openDialog = (type, value) => {
    this.setState({
      title: `${type === 'add' ? '新增' : '修改'}门店标签`,
      dialogStatus: true,
      editorList: type === 'update' && value,
      editorType: type
    })
  }
  del = record => {
    React.$confirm({
      title: '确定删除此数据信息吗？',
      onOk: async () => {
        const response = await apiGetStoreServiceLabelDel({ storeServiceId: record.serviceLabelId })
        if (response.code === 0) {
          await this.getData()
        }
      }
    })
  }
  dialogCancel = () => {
    this.setState({
      title: '',
      dialogStatus: false,
      editorList: null,
      editorType: ''
    })
  }
  editorData = async value => {
    const { editorType, editorList } = this.state
    this.setState({
      btnLoading: true
    })
    const response = editorType === 'add' ? await apiGetStoreServiceLabelAdd(value) : await apiGetStoreServiceLabelEdit({ serviceLabelId: editorList.serviceLabelId, ...value })
    if (response.code === 0) {
      this.setState({
        btnLoading: false,
        title: '',
        dialogStatus: false,
        editorList: null,
        editorType: ''
      }, () => this.getData())
    } else {
      this.setState({
        btnLoading: false
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageParams: {
        pageNo,
        pageSize
      }
    }, () => this.getData())
  }

  render() {
    const { loading, dataSource, columns, pageParams: { pageNo, pageSize }, total, title, dialogStatus, btnLoading, editorList } = this.state
    return <div className={"p-layout-box service-config"}>
      <div className={"p-search-box"}>
        <TheButton haspermi={['store:add']} onClick={() => this.openDialog('add')} type={'default'}
          size={'middle'}>新增标签</TheButton>
      </div>
      <div className={'p-layout-content-pagination'}>
        <TheTable loading={loading} dataSource={dataSource} columns={columns} />
        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
      </div>
      <TheDialog
        title={title}
        visible={dialogStatus}
        footer={null}
        handleCancel={this.dialogCancel}
      >
        <Editor btnLoading={btnLoading} dataSource={editorList} dialogClose={this.dialogCancel}
          onFinish={this.editorData} />
      </TheDialog>
    </div>
  }
}

export default Label;